
<template>
  <div>
     <el-upload
          ref="upload"
          action="/list"
          :auto-upload="false" 
          :file-list="fileList"   
          :limit="limit"  
          :on-change="beforeAvatarUpload" 
          :on-exceed="masterFileMax"  
          :on-preview="handlePictureCardPreview"  
          :on-remove="handleRemove" 
          list-type="picture-card"  
          multiple 
        >
          <i class="el-icon-plus"></i>
          <div slot="tip" class="form-tips" style="margin-top: 10px" >
            <el-tag  type="success">最多上传9张，最大上传大小2MB</el-tag>
          </div>
        </el-upload>
        <el-dialog 
        	:visible.sync="dialogVisibles" 
        	append-to-body 
        	class="dialog1" 
        	width="40%">
          <img :src="dialogImageUrl" alt="" class="ims">
        </el-dialog>

  </div>
</template>
<script>
  export default {
     data() {
    return {
      dialogImageUrl: '',   //浏览图片的路径
      fileList: [],    //图片列表
      imgs: [],  
      limit: 9,  //上传图片的数量
      dialogVisibles: false,  //控制浏览图片的对话框显示隐藏
      hideUpload: false,   // 判断是否隐藏上传按钮
      isAdd: true,  //判断对应的操作
      img64:[]
  }
     },
    methods: {
       //上传图片，添加到图片列表
 beforeAvatarUpload(file, fileList) {//文件状态改变
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
        return
      }
      //图片转为base64位
      let _this = this
      const reader = new FileReader()
      reader.readAsDataURL(file.raw)
      reader.onload = function(e) {
        undefined
        _this.imgs.push(this.result)
      }

      this.getimg(file)
      // console.log(file);
    },
    handleRemove(file, fileList) {//文件移除
      if (this.isAdd) {
        const reader = new FileReader()
        reader.readAsDataURL(file.raw)
        let _this = this
        reader.onload = function(e) {
          undefined
        }
      } else {
        if (file.raw) {
          const reader = new FileReader()
          reader.readAsDataURL(file.raw)
          let _this = this
          reader.onload = function(e) {
            undefined
          }
        } else {
          //回显图片，执行删除并添加到图片列表（后端服务器接受的图片列表中）
          this.construction.delImages.push(file.url)
        }
      }
      // console.log(fileList);//输出图片数据
      this.delimg(fileList)
    },
    //图片浏览
    handlePictureCardPreview(file) {//已展示的图片
      this.dialogImageUrl = file.url
      this.dialogVisibles = true
    },
    //限制多少张图片
    masterFileMax(files, fileList) {
      this.$message.warning(`请最多上传 ${this.limit} 个文件。`)
    },
     delimg(event) {
      this.img64=[]
      for(var i=0;i<event.length;i++){
        const file = event[i].raw;
      if (!file) {
        return;
      }
      const reader = new FileReader();
      reader.onload = (e) => {//加载图片转base64
        this.getimgbase64 = e.target.result;
        // console.log(this.getimgbase64);
        this.img64.push(this.getimgbase64)
        // console.log(this.img64);//base64文件
      };
      reader.readAsDataURL(file);//①读取文件
      }
      
    },
     getimg(event) {
      // this.img64=[]
      // for(var i=0;i<event.length;i++){
        const file = event.raw;
      if (!file) {
        return;
      }
      const reader = new FileReader();
      reader.onload = (e) => {//加载图片转base64
        this.getimgbase64 = e.target.result;
        // console.log(this.getimgbase64);
        this.img64.push("'"+this.getimgbase64+"'")//图片文件
        // console.log(this.img64);
        this.$emit("tupian",this.img64)
      };
      reader.readAsDataURL(file);//①读取文件
      
      // }
      
    },

    }
  }
</script>